<!-- Alternative Content Box End -->

<div class="contentcontainer med left">
  <div class="headings alt">
    <h2>Medium Width - Heading title here</h2>
  </div>
  <div class="contentbox">
    <form action="#">
      <p>
        <label for="textfield"><strong>Text field:</strong></label>
        <input type="text" id="textfield" class="inputbox" />
        <br />
        <span class="smltxt">(This is an example of a small descriptive text for input)</span> </p>
      <p>
        <label for="errorbox"><span class="red"><strong>Missing field:</strong></span></label>
        <input type="text" id="errorbox" class="inputbox errorbox" />
        <img src="<?=$kam_admin?>/images/icons/icon_missing.png" alt="Error" /> <br />
        <span class="smltxt red">(This is some warning text for the above field)</span> </p>
      <p>
        <label for="correctbox"><span class="green"><strong>Correct field:</strong></span></label>
        <input type="text" id="correctbox" class="inputbox correctbox" />
        <img src="<?=$kam_admin?>/images/icons/icon_approve.png" alt="Approve" /> </p>
      <p>
        <label for="smallbox"><strong>Small Text field:</strong></label>
        <input type="text" id="smallbox" class="inputbox smallbox" />
      </p>
      <select>
        <option>Dropdown Menu Example</option>
      </select>
      <br />
      <br />
      <input type="file" id="uploader" />
      <img src="<?=$kam_admin?>/images/loading.gif" alt="Loading" /> Uploading...
      <p> <br />
        <input type="checkbox" name="checkboxexample"/>
        Checkbox </p>
      <p>
        <input type="radio" name="radioexample" />
        Radio select<br />
      </p>
    </form>
    <?=$CKEditor->editor("content_en", "abc")?>
    <textarea class="text-input textarea" id="wysiwyg" name="textfield" rows="10" cols="75"></textarea>
    <p><br />
      <br />
      Buttons styles</p>
    <input type="submit" value="Submit" class="btn" />
    <input type="submit" value="Submit (Alternative)" class="btnalt" />
  </div>
</div>

<div class="contentcontainer sml right" id="tabs">
  <div class="headings">
    <h2 class="left">Tabs</h2>
    <ul class="smltabs">
      <li><a href="#tabs-1">Styles</a></li>
      <li><a href="#tabs-2">News</a></li>
    </ul>
  </div>
  <div class="contentbox" id="tabs-1">
    <h2 style="margin-bottom: 15px;">Some styling examples below:</h2>
    <p><strong>List style one</strong></p>
    <ul class="list">
      <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</li>
      <li>Consectetuer adipiscing elit</li>
      <li>Sed diam nonummy nibh euismod tincidunt</li>
    </ul>
    <div class="spacer"></div>
    <p><strong>List style two</strong></p>
    <ul class="ticklist">
      <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</li>
      <li class="cross">Consectetuer adipiscing elit</li>
      <li>Sed diam nonummy nibh euismod tincidunt</li>
    </ul>
    <p>Lorem ipsum dolor sit amet, <span class="highlighted">highlighted</span>, sed diam nonummy nibh euismod tincidunt.</p>
    <p>Faded spacer example:</p>
    <div class="spacer"></div>
    <p><span class="dropcap">D</span>rop cap example to make your text stand out more! Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
    <div class="spacer"></div>
    <h1> Heading 1 example</h1>
    <div class="spacer"></div>
    <h2>Heading 2 example</h2>
    <div class="spacer"></div>
    <h3>Heading 3 example</h3>
    <div class="spacer"></div>
    <h4>Heading 4 example</h4>
    <div class="spacer"></div>
    <h5>Heading 5 example</h5>
  </div>
  <div class="contentbox nopad" id="tabs-2">
    <div class="newsitem"> <img src="<?=$kam_admin?>/images/news_temp.png" class="hoverimg" alt="News" />
      <h3>Story 1 Example Title</h3>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed...<br />
        <a href="#" title="">Read full story</a></p>
    </div>
    <div class="newsitem"> <img src="<?=$kam_admin?>/images/news_temp.png" class="hoverimg" alt="News" />
      <h3>Story 2 Example Title</h3>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed...<br />
        <a href="#" title="">Read full story</a></p>
    </div>
    <div class="newsitem"> <img src="<?=$kam_admin?>/images/news_temp.png" class="hoverimg" alt="News" />
      <h3>Story 3 Example Title</h3>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed...<br />
        <a href="#" title="">Read full story</a></p>
    </div>
    <div class="newsitem"> <img src="<?=$kam_admin?>/images/news_temp.png" class="hoverimg" alt="News" />
      <h3>Story 4 Example Title</h3>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed...<br />
        <a href="#" title="">Read full story</a></p>
    </div>
    <p class="bottominfo"><a href="#" title="">See all news stories</a></p>
  </div>
</div>
